<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElDialog } from 'element-plus';
import { getScoreTeamList,submitTeamScore } from '@/api/user.js';

const route = useRoute();
const projectId = ref(route.query.projectId);
const teamList = ref([]);
const project = ref([]);
const dialogVisible = ref(false); // 控制对话框的显示与否
const selectedMember = ref(null); // 选中的成员信息

// 获取团队列表
const list = async () => {
  try {
    const resp = await getScoreTeamList(projectId.value);
    
    // 对 teamList 进行 tname 去重
    const uniqueTeamList = resp.data.teamLists.filter((item, index, self) =>
      index === self.findIndex(t => t.tname === item.tname)
    );
    
    teamList.value = uniqueTeamList;
    console.log(teamList.value);
  } catch (error) {
    ElMessage.error("获取数据失败");
  }
};

// 打分按钮的处理函数
const openScoreDialog = (member) => {
  selectedMember.value = member; // 记录选中的成员信息
  dialogVisible.value = true; // 显示对话框
};

// 提交分数
const submitScore = async () => {
  if (!selectedMember.value.result || !selectedMember.value.score) {
    ElMessage.warning("请填写分数和结果");
    return;
  }
  const scoreData = {
    tname: selectedMember.value.tname,
    result: selectedMember.value.result,
    score: selectedMember.value.score,
  };
  // 这里可以调用API提交结果和分数
  try {
    await submitTeamScore(projectId.value,scoreData);
    ElMessage.success("评分成功");
  } catch (error) {
    ElMessage.error("评分失败");
  } finally {
    dialogVisible.value = false; // 关闭对话框
  }
};

onMounted(() => {
  project.value.name = route.query.name || '未命名项目'; // 设置默认值，避免为空时出错
  list();
});
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>{{ project.name }} </span>
      </div>
    </template>

    <div class="container" style="min-height: 200px;">
      <el-table :data="teamList" style="width: 100%" align="center">
        <el-table-column prop="tname" label="团队名" width="180" align="center"/>

        <el-table-column prop="result" label="比赛成绩" width="180" align="center"/>
        <el-table-column prop="score" label="分数" width="180" align="center"/>
        <el-table-column 
          label="操作" 
          width="100"
          align="center"
          v-slot="scope"
        >
          <el-button type="danger" @click="openScoreDialog(scope.row)">打分</el-button>
        </el-table-column>
      </el-table>
    </div>

    <!-- 编辑框对话框 -->
    <el-dialog v-model="dialogVisible" title="打分" width="400px">
      <el-form>
        <el-form-item label="结果">
          <el-input v-model="selectedMember.result" placeholder="请输入比赛结果"></el-input>
        </el-form-item>
        <el-form-item label="分数">
          <el-input v-model="selectedMember.score" placeholder="请输入分数"></el-input>
        </el-form-item>
      </el-form>
      <span class="dialog-footer" slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitScore">确定</el-button>
      </span>
    </el-dialog>
  </el-card>
</template>

<style lang="scss" scoped>
.page-container {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.header {
  text-align: center; /* 项目名称居中 */
  font-size: 20px;
  font-weight: bold;
}

.container {
  width: 100%;
  display: flex;
  justify-content: center;
}

.el-table th,
.el-table td {
  text-align: center !important; /* 表格内容居中 */
}
</style>
